<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar title="地图找房" left-arrow @click-left="onClickLeft" />
  <!-- 图片部分 -->
  <div class="pic">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="(item,i) in List.houseImg" :key="i">
    <img :src=" 'http://liufusong.top:8080' + item" class="picSan" alt="">
  </van-swipe-item>
  </van-swipe>
  </div>
  <!-- 标题和特点 -->
  <div>
    <div>{{List.title}}</div>
    <van-tag plain type="danger" v-for="(item,i) in List.tags" :key="i">{{item}}</van-tag>
    <hr>
  </div>
  <!-- 信息 -->
  <van-row>
  <van-col span="8">{{List.price}}/月</van-col>
  <van-col span="8">{{List.roomType}}</van-col>
  <van-col span="8">{{List.size}}平米</van-col>
</van-row>
  <van-row>
  <van-col span="8">房型</van-col>
  <van-col span="8">租金</van-col>
  <van-col span="8">面积</van-col>
</van-row>
<hr>
<br>
<!-- 第三块 -->
<div>
<div>小区:{{List.community}}</div>
<!-- 地图 -->
<div class="map">
   <!-- <baidu-map class="bm-view" :center="{lng:List.longitude,lat:List.latitude}" :zoom="15"> -->
   <baidu-map class="bm-view" :center="center" :zoom="18">
        <bm-label :content="List.community"
         :position="{lng: List.coord.longitude, lat: List.coord.latitude}"
         :labelStyle="{color: 'red', fontSize : '16px'}"
         />
    </baidu-map>
</div>
<div>房屋配搭</div>
<div>
    <div class="house_config">
        <ul class="house_list">
          <li class="house_item" v-for="item in newSet" :key="item.letter">
            <p>
              <i :class="'iconfont'+' '+ item.letter"></i>
            </p>
            {{item.txt}}
          </li>
        </ul>
      </div>
</div>
</div>
<!-- 第四块 房屋概括 -->
<div>
  <div>房屋概括</div>
  <hr>
<!-- 两端对齐 -->
<van-row type="flex" justify="space-between">
  <van-col span="11">
    <van-row type="flex">
  <van-col span="6">
  <van-image
  round
  width="70px"
  height="70px"
  src="http://liufusong.top:8080/img/avatar.png"
/></van-col>
  <van-col span="12">
    <div style="font-size: 18px;margin-top:9px">王女士</div>
    <div style="font-size: 13px; color:red;margin-top:4px">已认证房主</div>
  </van-col>
</van-row>
  </van-col>
  <van-col span="6">
    <van-button plain type="primary">发消息</van-button>
  </van-col>
</van-row>
<!-- 详细介绍 -->
<div style="font-size:13px">
  1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。 2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。 3.人车分流，环境优美。 4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
</div>
</div>
<!-- 第五块 猜你喜欢 -->
<div>
  <p>猜你喜欢</p>
  <hr>
   <!-- 列表 -->
   <van-card
    v-for="(item, index) in likeList"
    :key="index"
    :price="item.price"
    :desc="item.desc"
    :title="item.title"
    :thumb="`http://liufusong.top:8080` + item.houseImg"
  >
    <template #tags>
      <van-tag
        plain
        type="danger"
        v-for="(item, index) in item.tags"
        :key="index"
      >
        {{ item }}
      </van-tag>
    </template>
  </van-card>
</div>
  </div>
</template>

<script>
import { specificApi, inquireHouses } from '@/api'
export default {
  data () {
    return {
      x: '',
      y: '',
      likeList: [],
      List: [],
      center: { lng: 0, lat: 0 },
      houseSet: [
        { txt: '电视', letter: 'icon-dianshi' },
        { txt: '冰箱', letter: 'icon-bingxiang' },
        { txt: '洗衣机', letter: 'icon-xiyiji' },
        { txt: '空调', letter: 'icon-kongdiao' },
        { txt: '热水器', letter: 'icon-reshuiqi' },
        { txt: '天然气', letter: 'icon-tianranqi' },
        { txt: '衣柜', letter: 'icon-yigui' },
        { txt: '宽带', letter: 'icon-kuandai' },
        { txt: '暖气', letter: 'icon-nuanqi' },
        { txt: '沙发', letter: 'icon-shafa' }
      ],
      newSet: []
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    }
  },
  async created () {
    const res = await specificApi(this.$route.query.name)
    console.log(res)
    this.List = res.data.body
    console.log(this.List)
    this.x = this.List.coord.longitude
    this.y = this.List.coord.latitude
    this.center = { lng: this.List.coord.longitude, lat: this.List.coord.latitude }
    // 房屋设施筛选
    const a = this.List.supporting
    console.log(a)
    this.houseSet.forEach((item) => {
      a.forEach(k => {
        if (item.txt === k) {
          this.newSet.push(item)
        }
      })
    })
    // 三个房子的数据
    const req = await inquireHouses({
      end: 3,
      start: 1
    })
    this.likeList = req.data.body.list
    console.log(req)
  }
}
</script>
<style lang="less" scoped>
/deep/ .van-nav-bar__content {
  background-color: #21b97a;
}
/deep/ .van-nav-bar__title {
  color: #fff;
}
/deep/ .van-icon {
  color: #fff;
}
.pic {
  height: 252px;
  .picSan {
    height: 252px;
    width: 100%;
  }
}
.map {
  height: 145px;
  width: 100%;
  .bm-view {
  height: 145px;
  width: 100%;
  }
}
// 房屋配置
.house_config {
  .house_list {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    background: #fff;
    .house_item {
      padding: 20px 0;
      flex: 20%;
      font-size: 14px;
      .iconfont {
        font-size: 23px;
      }
    }
  }
}
.van-col--12 {
  margin-left: 35px;
}
</style>
